<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.3.1.min.js"></script>
    <script>
        $(function(){
         //attr (属性名) 获取属性值
         //attr (属性名，属性值) 设置属性
        //  $("span").attr("data-id","1002");
        //  console.log($("span").attr("id"));
        //  console.log($("span").attr("data-id"));
         
        //  var chk=$("sex").prop("checked"); // 获取返回成布尔值 可以设置全选和反选  返回：true false
        //  console.log(chk);

        //  var chk2=$("sex").attr("checked");    //  返回：checked underfined
        //  console.log(chk2);

        //  var chk2=$("sex").attr("checked",true); 
        //  var chk2=$("sex").prop("checked",true); 
         
        $("#sex").change(function(){
            // $(":checkbox").prop("checked",false); 
            var chk1= $(this).prop("checked");
            $(":checkbox:not([id])").prop("checked",chk1); 
            // console.log(chk1);
        })

        $("#sex2").change(function(){ 
            // $(":checkbox").each(function(index,item){
            //   var ck=$(item).prop("checked");
            //     console.log(ck);
            // }); 

            $(":checkbox:not([id])").each(function(index,item){
              var ck=$(item).prop("checked"); 
              $(item).prop("checked",!ck);
                console.log(ck);
            }); 
            
        })
        // 没有参数值时获取 含有参数之时设置
        // html 包含HTML标签的起码   div<span>span</span>
        // text 获取纯文本  divspan
        // val  获取交互控件（表单控件）的值   ""
        // 在设置时，HTML会解析其中的值，text不会解析，只是原样输出

        var html=$("div").html();
        var text=$("div").text();
        var val=$("div").val();
         console.log(html,text,val);
        //css修改行内样式
        $("div").css("color","red");
        //方法
        $("div").css("width");//方法一
        $("div").width(); // 方法二 不传参数获取 传参数时设置


        })
    </script>
</head>
<body>
    <div class="a" style="">div<span>span</span></div>
    <form action="#">
        <span id="name">姓名：</span>
        <input type="text" name="name" >
        <br>
        <!-- <span id="name">姓别：</span> -->
        <input type="checkbox" name="sex" id="sex" >
        <label for="sex">全选/全不选</label>

        <input type="checkbox" name="sex2" id="sex2" >
        <label for="sex">反选</label>

        <input type="checkbox" name=""   >
        <input type="checkbox" name=""   >
        <input type="checkbox" name=""   >
    </form>
</body>
</html>